<!--
 * @Author: Cenven
 * @Date: 2021-05-18 09:59:09
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-05-22 17:12:04
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
    <div class='page-mobile-teacher-settled'>
        <white-header
        :isShowTopNav="true"
        :isShowBack="true"
        :isShowRight="true"
        title="教师入驻"
        ></white-header>
        <div class="form_box" v-if="!successBox">
            <div class="form_box_item">
                <input class="form_box_item_input" type="text" v-model="form.acName" name="acName" placeholder="请输入您的真实姓名">
                <div class="form_box_item_required">*</div>
            </div>
            <div class="form_box_item">
                <input class="form_box_item_input" type="text" v-model="form.idNumber" name="idNumber" placeholder="请输入您的身份证号">
                <div class="form_box_item_required">*</div>
            </div>
            <div class="form_box_item">
                <div class="form_box_item_lebel">请选择您的性别 :</div>
                <div class="form_box_item_text">
                    <van-radio-group v-model="form.gender" direction="horizontal">
                        <van-radio name="1" style="margin-right:.6rem;">男</van-radio>
                        <van-radio name="0">女</van-radio>
                    </van-radio-group>
                </div>
                <div class="form_box_item_required">*</div>
            </div>
            <div class="form_box_item">
                <input class="form_box_item_input" type="text" v-model="form.email" name="email" placeholder="请输入您的邮箱">
                <div class="form_box_item_required">*</div>
            </div>
            <div class="form_box_item">
                <div class="form_box_item_lebel">请选择您的生日 :</div>
                <div class="form_box_item_text" @click="showPicker = true">
                    <div class="time_box">{{form.birthday}}</div>
                </div>
                <div class="form_box_item_required">*</div>
            </div>
            <div class="form_box_item avatar">
                <div class="form_box_item_lebel">请上传您的头像</div>
                <div :class="['form_box_item_avatar',avatarUrl ? 'active' : '']">
                    <van-uploader :after-read="afterRead" accept="image/*" style="width:100%;height:100%;">
                　　　　<img v-if="avatarUrl" :src="avatarUrl" style="width: 2.12rem;height: 2.12rem;">
                　　</van-uploader>
                </div>
                <div class="form_box_item_required">*</div>
            </div>
            <div class="form_box_item textarea">
                <textarea class="form_box_item_textarea" v-model="form.introduce" name="introduce" rows="3" cols="20" placeholder="请输入您的简介"></textarea>
                <div class="form_box_item_required">*</div>
            </div>
            <div class="form_box_item">
                <input class="form_box_item_input" type="text" v-model="form.designation" name="designation" placeholder="请输入您的职称">
                <div class="form_box_item_required">*</div>
            </div>
            <div class="form_box_item">
                <input class="form_box_item_input" type="text" v-model="form.mobile" name="mobile" placeholder="请输入您的手机">
                <div class="form_box_item_required">*</div>
            </div>
            <div class="form_box_item">
                <input class="form_box_item_input" type="text" style="width:60%;" v-model="form.captcha" name="captcha" placeholder="请输入验证码">
                <div :class="['send_code',isShowCountDown ? 'count_down' : '']" @click="sendCode()">
                    <span v-if="!isShowCountDown">发送验证码</span>
                    <span v-else>重新获取({{countDown}})</span>
                </div>
                <div class="form_box_item_required">*</div>
            </div>
            <div class="form_box_item">
                <input class="form_box_item_input" type="text" v-model="form.password" name="password" placeholder="请输入您密码">
                <div class="form_box_item_required">*</div>
            </div>
            <div class="form_submit-btn" @click="submitForm">提交</div>
        </div>
        <div class="success_box" v-else>
            <van-icon class="icon_success" size="2rem" name="checked" color="var(--theme-color)" />
            <p>资料提交成功，请耐心等待审核！</p>
        </div>
        <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker
                type="date"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onConfirm"
                @cancel="showPicker = false"
            />
        </van-popup>
    </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import { getTeacherSmsCode } from "~/api/account/user";
import { saveTeacherSettled } from "~/api/teacher";
export default {
    name:"teacher-settled",
    components: {
        WhiteHeader
    },
    data(){
        return {
            showPicker:false,
            form:{
                acName:null,
                idNumber:null,
                gender:null,
                email:null,
                mobile:null,
                password:null,
                introduce:null,
                designation:null,
                birthday:null,
                code:null,
                file:null,
            },
            minDate: new Date(1970, 0, 2),
            maxDate: new Date(),
            currentDate: new Date(),
            avatarUrl:"",
            countDown:60,
            isShowCountDown:false,
            successBox:false,
            flag:false,
        }
    },
    created(){
        this.initPages();
    },
    activated(){
        this.initPages();
        if (document.body.scrollTop!=0) {
            document.body.scrollTop = 0;
        }else {
            document.documentElement.scrollTop = 0;
        }
    },
    mounted(){
    },
    methods:{
        ...mapMutations([
            "SET_IS_LOADING",
        ]),
        initPages(){
            this.form = {
                acName:null,
                idNumber:null,
                gender:null,
                email:null,
                mobile:null,
                password:null,
                introduce:null,
                designation:null,
                birthday:null,
                captcha:null,
                file:null,
            },
            this.avatarUrl = "";
            this.countDown = 60;
            this.isShowCountDown = false;
            this.successBox = false;
        },
        async sendCode(){
            if(this.isShowCountDown){
                return;
            }
            if(!(this.form.mobile && this.form.mobile.trim())){
                this.$toast({
                    message: '请输入您的手机',
                    icon: 'warn-o',
                });
                return;
            }else{
                if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile))) {
                    this.$toast({
                        message: '请输入正确的手机号',
                        icon: 'warn-o',
                    });
                    return;
                }
            }
            this.isShowCountDown = true;
            let result = await getTeacherSmsCode({
                number : this.form.mobile
            })
            if(result && result.data && result.data.code == 200){
                let timer = setInterval(()=>{
                    this.countDown--;
                    if(this.countDown <= 0){
                        this.countDown = 60;
                        clearInterval(timer);
                        this.isShowCountDown = false;
                    }
                },1000)
            }else{
                this.$toast({
                    message: '发送失败',
                    icon: 'warn-o',
                });
                return;
            }
            
        },
        async submitForm(){
            const { acName, idNumber, email, gender, mobile, password, introduce, designation, birthday, captcha } = this.form;
            if(!(acName && acName.trim())){
                this.$toast({
                    message: '请输入您的真实姓名',
                    icon: 'warn-o',
                });
                return;
            }
            if(!(idNumber && idNumber.trim())){
                this.$toast({
                    message: '请输入您的身份证号',
                    icon: 'warn-o',
                });
                return;
            }else{
                if (!(/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(idNumber))) {
                    this.$toast({
                        message: '请输入正确的身份证号',
                        icon: 'warn-o',
                    });
                    return;
                }
            }
            if(!gender){
                this.$toast({
                    message: '请选择您的性别',
                    icon: 'warn-o',
                });
                return;
            }
            if(!(email && email.trim())){
                this.$toast({
                    message: '请输入您的邮箱',
                    icon: 'warn-o',
                });
                return;
            }else{
                if (!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email))) {
                    this.$toast({
                        message: '请输入正确的邮箱',
                        icon: 'warn-o',
                    });
                    return;
                }
            }
            if(!(birthday && birthday.trim())){
                this.$toast({
                    message: '请选择您的生日',
                    icon: 'warn-o',
                });
                return;
            }
            if(!(this.avatarUrl && this.form.file)){
                this.$toast({
                    message: '请上传您的头像',
                    icon: 'warn-o',
                });
                return;
            }
            if(!(introduce && introduce.trim())){
                this.$toast({
                    message: '请输入您的简介',
                    icon: 'warn-o',
                });
                return;
            }
            if(!(designation && designation.trim())){
                this.$toast({
                    message: '请输入您的职称',
                    icon: 'warn-o',
                });
                return;
            }
            if(!(mobile && mobile.trim())){
                this.$toast({
                    message: '请输入您的手机',
                    icon: 'warn-o',
                });
                return;
            }else{
                if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(mobile))) {
                    this.$toast({
                        message: '请输入正确的手机',
                        icon: 'warn-o',
                    });
                    return;
                }
            }
            if(!(captcha && captcha.trim())){
                this.$toast({
                    message: '请输入验证码',
                    icon: 'warn-o',
                });
                return;
            }
            if(!(password && password.trim())){
                this.$toast({
                    message: '请输入您的密码',
                    icon: 'warn-o',
                });
                return;
            }else{
                if (!(/^[a-zA-Z0-9\S,.!@$^&*-=+`~?:;]{6,16}$/.test(password))) {
                    this.$toast({
                        message: '密码格式不正确',
                        icon: 'warn-o',
                    });
                    return;
                }
            }
            let params = {
                ...this.form
            }
            let fd = new FormData();
            Object.keys(params).forEach(i => {
                if(params[i]){
                    fd.append(i, params[i]);
                }
            });
            this.SET_IS_LOADING(true);
            if(this.flag){
                return;
            }
            this.flag = true;
            let result = await saveTeacherSettled(fd);
            if (result && result.data && result.data.code == 200) {
                this.successBox = true;
                this.flag = false;
            }else if(result && result.data && result.data.code == 1001){
                this.$toast({
                    message: result.data.msg,
                    icon: 'warn-o',
                });
                this.flag = false;
            } else {
                this.$toast({
                    message: '提交失败',
                    icon: 'warn-o',
                });
                this.flag = false;
            }
            this.SET_IS_LOADING(false);
        },
        async afterRead(file) {
            this.avatarUrl = file.content;
            this.form = {
                ...this.form,
                file:file.file
            };
            return false;
        },
        onConfirm(time) {
            this.form.birthday = this.parseTime(time,'{y}-{m}-{d}');
            console.log(time);
            this.showPicker = false;
        },
        parseTime(time, pattern) {
            if (arguments.length === 0 || !time) {
                return null
            }
            const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
            let date
            if (typeof time === 'object') {
                date = time
            } else {
                if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
                    time = parseInt(time)
                } else if (typeof time === 'string') {
                    time = time.replace(new RegExp(/-/gm), '/');
                }
                if ((typeof time === 'number') && (time.toString().length === 10)) {
                    time = time * 1000
                }
                date = new Date(time)
            }
            const formatObj = {
                y: date.getFullYear(),
                m: date.getMonth() + 1,
                d: date.getDate(),
                h: date.getHours(),
                i: date.getMinutes(),
                s: date.getSeconds(),
                a: date.getDay()
            }
            const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
                let value = formatObj[key]
                // Note: getDay() returns 0 on Sunday
                if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
                if (result.length > 0 && value < 10) {
                    value = '0' + value
                }
                return value || 0
            })
            return time_str
        },
    }
}
</script>
<style lang='scss'>
.page-mobile-teacher-settled{
    .van-radio__icon--checked+.van-radio__label{
        color: var(--theme-color);
    }
    .van-radio__label{
        color: #B3B3B3;
    }
    .van-uploader__wrapper{
        width: 100%;
        height: 100%;
        .van-uploader__upload{
            background: #FFFFFF;
            width: 100%;
            height: 100%;
            margin: 0;
            .van-uploader__upload-icon{
                display: none;
            }
        }
    }
   
}
</style>
<style lang='scss' scoped>
.page-mobile-teacher-settled{
    width: 7.2rem;
    min-height: 100vh;
    background: #F2F2F5;
    .form_box{
        width: 7.2rem;
        padding: .5rem 0;
        .form_box_item{
            width: 6.336rem;
            margin: 0 auto .288rem;
            height: .8448rem;
            background: #FFFFFF;
            border-radius: .096rem;
            position: relative;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 .24rem;
            .send_code{
                width: 40%;
                color: var(--theme-color);
                font-size: .288rem;
                text-align: center;
                &.count_down{
                    color: #CCCCCC;
                }
            }
            &.avatar{
                height: 3.84rem;
                display:block;
                padding: .24rem;
            }
            &.textarea{
                padding: .24rem;
                // height: auto;
                min-height: 1.728rem;
            }
            input::-webkit-input-placeholder { /* WebKit browsers */ 
                color: #CCCCCC; 
            }
            input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
                color: #CCCCCC; 
            }
            input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
                color: #CCCCCC; 
            }
            input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
                color: #CCCCCC; 
            }
            textarea::-webkit-input-placeholder { /* WebKit browsers */ 
                color: #CCCCCC; 
            }
            textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
                color: #CCCCCC; 
            }
            textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ 
                color: #CCCCCC; 
            }
            textarea:-ms-input-placeholder { /* Internet Explorer 10+ */ 
                color: #CCCCCC; 
            }
            .form_box_item_input{
                width: 100%;
                height: .8448rem;
                border: none;
                line-height: .7rem;
                font-size: .288rem;
            }
            .form_box_item_lebel{
                min-width: 2.8rem;
                height: .288rem;
                font-size: .288rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #CCCCCC;
                line-height: .288rem;
            }
            .form_box_item_textarea{
                width: 100%;
                border: none;
                line-height: .4rem;
                font-size: .288rem;
            }
            .form_box_item_avatar{
                width: 2.16rem;
                height: 2.16rem;
                border-radius: .144rem;
                overflow: hidden;
                border: 1px dashed #CCCCCC;
                margin: .5rem auto;
                position: relative;
                &.active{
                    &::after{
                        display: none;
                    }
                    &::before{
                        display: none;
                    }
                }
                .avatar-uploader{
                    width: 100%;
                    height: 100%;
                    .avatar-contain-box{
                        width: 100%;
                        height: 100%;
                    }
                }
                &::after{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    content: "";
                    width: .4rem;
                    height: .05rem;
                    background: #CCCCCC;
                    z-index: 1;
                }
                &::before{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    content: "";
                    width: .05rem;
                    height: .4rem;
                    background: #CCCCCC;
                    z-index: 1;
                }
            }
            .form_box_item_text{
                .time_box{
                    width: 3rem;
                    height: .8448rem;
                    font-size: .288rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #666666;
                    line-height: .8448rem;
                    position: relative;
                    &::before {
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        content: '';
                        border-top: .13rem solid transparent;
                        border-bottom: .13rem solid transparent;
                        border-left: .13rem solid var(--theme-color);
                    }
                }
            }
            .form_box_item_required{
                position: absolute;
                left: -.2rem;
                top: .06rem;
                width: .1344rem;
                height: .2688rem;
                font-size: .2496rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FF5252;
                line-height: .2688rem;
            }
        }
        .form_submit-btn{
            width: 6.336rem;
            margin: .6912rem auto .6912rem;
            height: .8448rem;
            text-align: center;
            line-height: .8448rem;
            border-radius: .3936rem;
            background: var(--theme-color);
            color: #FFFFFF;
            font-size: .3264rem;
        }
    }
    .success_box{
        width: 7.2rem;
        box-sizing: border-box;
        padding: 1rem 0;
        text-align: center;
        &>p{
            line-height: .7rem;
            font-size: .3456rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
        }
    }
}
</style>

